import React,{useState} from 'react'
import { 
  Form, Input, Button, 
  Select , Spin,message
} from 'antd';
import { jobCfyPub } from '../../api/job.js'
import ImgUpload from '../../components/ImgUpload'
const { Option } = Select;
const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const CfyPub = () => {
  const [form] = Form.useForm();
  let [loading,setLoading] = useState(false)  //控制loading窗
  let [imgUrl,setImgUrl] = useState()  //存放ImgUpload提供的图片路径
  const onFinish = (values) => {  //表单的submit触发的事件函数
    console.log(values);
    setLoading(true) //开启loading
    values.cfyimg = imgUrl  //将Upload组件提供的路径，追加至表单数据
    jobCfyPub(values).then(res=>{  //发起录入分类请求
      console.log(res);
      setLoading(false) //关闭loading
      if(res.status===201){
        message.success('分类录入成功')
        onReset()
      }
    })
  }

  const onReset = () => {
    form.resetFields();
  }

  const handleImgUrl = (url)=>{ //用以接受ImgUpload传递的在线图片路径
    console.log(url);
    setImgUrl(url)
  }

  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="cfyname"
          label="分类名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="cfytype"
          label="归属分类"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择归属分类"
            allowClear
          >
            <Option value="1">实习</Option>
            <Option value="2">兼职</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="cfyimg"
          label="分类图标"
        >
          <ImgUpload handleImgUrl={handleImgUrl}/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            确定发布
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置表单
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default CfyPub
